<template>
<div>
   <div class="blog-content" v-if="showBlogPage"> 
    <!-- 头部-->
     <div class="blog-content-top">
      <Top></Top>
    </div>

    <!-- <PersonalInformation></PersonalInformation> -->
    <!-- 文章内容 -->
    <div class="article_content">
      <!-- <Articlejiegou></Articlejiegou> -->
      <router-view name="a"></router-view>
    </div>

    <!-- <ShowArticlejiagou></ShowArticlejiagou> -->
    <!-- <LoginAndRegisterjiagou></LoginAndRegisterjiagou> -->
    <router-view name="loginandregister"></router-view>

    <!-- 回顶部 -->
    <el-backtop> </el-backtop>
  </div>
    <div v-if="showAdminPage">
      <!-- <AdminHomePage></AdminHomePage> -->
      <router-view name="adminHomeview" ></router-view>
  </div>
</div>
 

</template>

<style scoped>
.blog-content {
  width: 100%;
  position: relative;
  /* height: 2000px; */
}

/* 头部 */
.blog-content-top {
  width: 100%;
  height: 55px;
  background: #fff;
  position: fixed;
  z-index: 999;
  top: 0;
}

/* 文章内容 */

.article_content {
  width: 100%;
  /* border: 1px solid red; */
  margin: 0 auto;
  position: relative;
}

/* 搜索框没边框 */
.center-input .el-input__inner {
  border: 0px solid red !important;
}
.address-seacher .el-input__inner {
  border: 0px !important;
  background-color: #313a44 !important;
  width: 159px;
  height: 26px;
}
</style>

<script>
import Top from "./components/top/top.vue";
import AdminHomePage from "@/components/adminSystem/adminHomePage.vue";
import Articlejiegou from "./components/article/articlejiegou.vue";
import axios from "axios";
import ShowArticlejiagou from "./components/showArticle/showArticlejiagou.vue";
import LoginAndRegisterjiagou from "./components/loginAndregister/loginAndregisterjiagou.vue";
import PersonalInformation from "./components/personalInformation/personalInformation.vue";
import pubsub from "pubsub-js";
// import AdminHomePage from "./components/adminSystem/adminHomePage.vue";
export default {
  name: "App",
  data() {
    return {
      showAdminPage:true,
      showBlogPage:true
    }
  },
  components: {
    Top,
    Articlejiegou,
    ShowArticlejiagou,
    LoginAndRegisterjiagou,
    PersonalInformation,
    AdminHomePage
  },
  mounted() {
     //监听浏览器刷星
    // window.addEventListener("beforeunload", this.chickToken());
   this.chickToken()
   this.adminHomePage()
   this.blogIndexPage()
  },
  methods: {
    //后台系统监听
    adminHomePage(){
        pubsub.subscribe("toadminHomePage",(item,data)=>{
            this.showBlogPage=false;
            this.showAdminPage = true
        })
    },
    //用户界面系统监听
    blogIndexPage(){
      pubsub.subscribe("toBlogPage",(item,data)=>{
         this.showBlogPage=true;
            this.showAdminPage = false
      })
    },
   //监听浏览器刷新
    chickToken() {
         
      //订阅登录发送的消息 用来启动定时器
      pubsub.subscribe("startTimer",(item,data)=>{
           //设置一个定时器用来做token验证登录时间
             var tokenTime = localStorage.getItem("tokenTime");
           var dateinfo = new Date().getTime();
       if(tokenTime !=null){
            //用token过期时间减现在的时间，得到删除token的时间
             var jianTime = tokenTime - dateinfo;

             this.tokenSetTimeOut(jianTime)
       
       }
      })
       //设置一个定时器用来做token验证登录时间
          var tokenTime = localStorage.getItem("tokenTime");
       var dateinfo = new Date().getTime();
       if(tokenTime !=null){
            //用token过期时间减现在的时间，得到删除token的时间
       var jianTime = tokenTime - dateinfo;

      this.tokenSetTimeOut(jianTime)
       
       }
    
    },
    tokenSetTimeOut(jianTime){
            if(jianTime <= 0){
              //登录过期 清空登录信息 提示用户重新登录
                localStorage.removeItem("vuex");
              localStorage.removeItem("token");
              // localStorage.removeItem("tokenTime");
               //通知top
                  pubsub.publish("unlogin",0)
             
              //去首页
              this.$router.push({
                name:"home"
              })
               this.open()
              
            }else{
                 setTimeout(() => {
                  //登录过期 清空登录信息 提示用户重新登录
                    localStorage.removeItem("vuex");
                  localStorage.removeItem("token");
                  // localStorage.removeItem("tokenTime");
                  //通知top
                  pubsub.publish("unlogin",0)
                  //去首页
                  this.$router.push({
                    name:"home"
                  })
                   this.open()
                }, jianTime);

            }
         
    },
     open() {
        this.$confirm('亲，您的登录时间过期啦！是否重新登录', '过期提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '即将去登录页面!'
          });

          //去登录页面
          setTimeout(() => {
            this.$router.push({
              path:"/tologin"
            })
          }, 3000);

        }).catch(() => {
        
        });
      }
  },
};
</script>



